<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3033722_ohr77f7gy3h.css">
    <style>
        .article{
            width: 300px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div id="app">
        <my-count-down :times="4*60*60*1000"></my-count-down>
        <my-count-down :times="1*60*60*1000"></my-count-down>
        <my-count-down :times="25*60*60*1000" format="DD天HH时mm分ss秒"></my-count-down>
        <my-count-down :times="25*60*60*1000">
            <!-- slotScope  对应接收组件内传出对象数据 -->
            <template v-slot:default="slotScope">
                <!-- {{slotScope}} -->
                距离秒杀结束还有{{slotScope.day}}天{{slotScope.hour}}时{{slotScope.min}}分{{slotScope.sec}}秒
            </template>
        </my-count-down>
        <my-count-down :times="25*60*60*1000">
            <!-- slotScope  对应接收组件内传出对象数据 => 可以对该对象进行解构 -->
            <template v-slot:default="{day,hour,min,sec}">
                <!-- {{slotScope}} -->
                距离秒杀结束还有{{day}}天{{hour}}时{{min}}分{{sec}}秒
            </template>
        </my-count-down>
    </div>
</body>
<template id="demo">
    <div class="countDown">
        <template v-if="format">{{formatStr}}</template>
        <template v-else>
            <!-- 子组件可以通过特殊手段,将组件内的某些数据通过插槽传递到组件外 -->
            <!-- 传递的数据会自动整合为一个对象(属性名作为对象的键名)  => {day,hour,min,sec} -->
            <slot name="default" :day="day" :hour="hour" :min="min" :sec="sec" >{{hour}}:{{min}}:{{sec}}</slot>
        </template>
    </div>
</template>
<!-- function({day,hour,min,sec}=slotScope){
   距离秒杀结束还有{{day}}天{{hour}}时{{min}}分{{sec}}秒
} -->

<script>



    // 问题1. 组件内的按钮内容是死的 => 活的  => 传入一个属性来定义按钮内容
    // 问题2. 父组件传入的内容 可能是 text , html结构, 其他组件  => 通过属性结束 后期不好解析


    // 官方提供了插槽功能 => 在组件内使用<slot></slot>标签作为占位符, 

    // 命名插槽 
    // 1. 可以在组件内定义多个插槽 分别赋予不同的名字
    // 2. 父组件向子组件传递插槽内容时,也要对应名字区分


    // 插槽作用域
    // 1. 子组件可以通过特殊手段,将组件内的某些数据通过插槽传递到组件外 (作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里：)
    // 2. 父组件向子组件传递插槽内容时,可以使用子组件传递的数据 (只能在插槽内容中使用  v-slot:插槽名称 = "插槽传递的数据")

    Vue.component("MyCountDown", {
        props:{
            times:{
                type:Number,
                required:true,
            },
            format:{
                type:String,
                default:"",
            }
        },
        data() {
            return {
                // time: 4*60*60*1000, // 定值

                time: this.times, // 单位ms (从父组件传入 作为time的初始值)
                timer: null,
            }
        },
        template: `#demo`,
        methods: {
            beauty(val) {
                return val.toString().padStart(2, "0");
            },
            timeDown() {
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.time -= 1000;
                    if (this.time <= 0) {
                        clearInterval(this.timer);
                    }
                }, 1000);
            }
        },
        computed: {
            day() {
                return this.beauty(parseInt(this.time / (24 * 60 * 60 * 1000)));
            },
            hour() {
                return this.beauty(parseInt(this.time / (60 * 60 * 1000)) % 24);
            },
            min() {
                return this.beauty(parseInt(this.time / (60 * 1000)) % 60);
            },
            sec() {
                // 总的时间(ms) / 1000 =>  xxx秒(总的秒数)
                return this.beauty(parseInt(this.time / 1000) % 60);
            },
            formatStr(){
                // this.format DD天HH时mm分ss秒
                return  this.format.replace("DD",this.day).replace("HH",this.hour).replace("mm",this.min).replace('ss',this.sec);
            }
        },
        mounted() {
            this.timeDown();
            console.log("$props",this.$props);
        },
        beforeDestroy() {
            console.log("准备销毁组件");
            clearInterval(this.timer);
        },
    })

   
    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        }
    })



</script>
</html>